<template>
	<view class="wap">
		<view class="dynamic">
			<view class="dynamic_title">
				<image src="" mode=""></image>
				<view class="dynamic_title_r">
					<view class="dynamic_title_r_l">
						<view>阿甘的威士忌森林</view>
						<view style="font-size: 30rpx; color: #999999;margin-top: 4rpx;">2020-06-10</view>
					</view>
					<view class="dynamic_title_r_r">
						关注
					</view>
				</view>
			</view>
			
			<view class="dynamic_content">
				<view class="dynamic_content_title">我大萨大萨大萨大萨大撒多大萨大萨大大撒大所大萨大萨大撒撒打算打算大萨达醉与不醉是在你们的眼里，醒与不醒却是在</view>
				<view class="img">
					<image src="" mode=""></image>
				</view>
				<view class="img">
					<image src="" mode=""></image>
				</view>
				<view class="ding">
					<image :src="require('./static/img/dingwei.png')" mode=""></image>
					<text>北京</text>
				</view>
			</view>
			<view class="dynamic_foot">
					<view>
						<image :src="require('./static/img/dianzan.png')" mode=""></image>
						<text>1.5w</text>
					</view>
					<view>
							<image :src="require('./static/img/pinglun.png')" mode=""></image>
							<text>102</text>
					</view>
					<view>
							<image :src="require('./static/img/zhuanfa.png')" mode=""></image>
							<text>102</text>
					</view>
					
			</view>
		</view>
		
		
		<view class="comment">
			<view class="comment_title">全部评论</view>
			<view class="comment_content">
				<image src="" mode=""></image>
				<view class="comment_content_r">
					<view class="comment_content_r_title">
						<view class="comment_content_r_title_r">
							<view>四十四天日落</view>
							<view>20小时以前</view>
						</view>
						<view class="comment_content_r_title_l"><image :src="require('./static/img/dianzan.png')" mode=""></image></view>
					</view>
					<view class="comment_content_r_content">不忘初心，保持好奇，坚持不懈，做好自己</view>
				</view>
			</view>	
			
			
			
			<!-- 回复 -->
	
			<view class="comment_content">
				<image src="" mode=""></image>
				<view class="comment_content_r">
					<view class="comment_content_r_title">
						<view class="comment_content_r_title_r">
							<view>快乐迪士尼</view>
							<view>20小时以前</view>
						</view>
						<view class="comment_content_r_title_l"><image :src="require('./static/img/dianzan.png')" mode=""></image></view>
					</view>
					<view class="comment_content_r_content">回复<text>快乐迪士尼:</text>差不多</view>
				</view>
			</view>	
	
	
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.wap{
	height: 100%;
	background: #F3F3F3;
	.dynamic{
		padding: 32rpx;
		background: white;
		margin-bottom: 32rpx;
		.dynamic_title{
			display: flex;
			font-size: 34rpx;
			image{
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
				border: 1rpx solid #000000;
				margin-right: 16rpx;
			}
		}
		.dynamic_title_r{
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.dynamic_title_r_r{
				width: 164rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				border-radius: 16rpx;
				background: #FEDD12;
				font-weight: bold;
			}
		}
		.dynamic_content{
			margin-top: 32rpx;
			.dynamic_content_title{
				font-size: 30rpx;
				color: #666666;
				display: -webkit-box;
			    -webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				 overflow: hidden;
				 margin-bottom: 16rpx;
			}
			.img{
				height: 686rpx;
				border-radius: 16rpx;
				border: 1rpx solid #C0C0C0;
				margin-top: 16rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.ding{
				font-size: 28rpx;
				color: #FEDD12;
				display: flex;
				align-items:center;
				margin-top: 16rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
			}
		}
		
		.dynamic_foot{
			margin-top: 32rpx;
			display: flex;
			justify-content:space-between;
			image{
				width: 44rpx;
				height: 44rpx;
				
			}
			text{
				font-size: 20rpx;
				color: #999999;
			}
		}
	}
	.comment{
		padding: 32rpx;
		background: white;
		& .comment_content:last-child .comment_content_r{
			border: 0;
		}
		.comment_title{
			font-size: 30rpx;
			font-weight: bold;
		}
		.comment_content{
			display: flex;
			margin-top: 38rpx;
			image{
				width: 64rpx;
				height: 64rpx;
				border: 1rpx solid #C0C0C0;
				border-radius: 50%;
				margin-right: 16rpx;
			}
			.comment_content_r{
				flex: 1;
				min-width: 0;
				padding-bottom: 32rpx;
				border-bottom: 1rpx solid #F3F3F3;
				.comment_content_r_title{
					display: flex;
					flex: 1;
					min-width: 0;
					justify-content: space-between;
					align-items: center;
					.comment_content_r_title_r{
						font-size: 30rpx;
						color: #999999;
					}
					.comment_content_r_title_l{
						image{
							width: 44rpx;
							height: 44rpx;
							border: 0;
						}
					}
				}
				.comment_content_r_content{
					font-size: 30rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 4;
					 overflow: hidden;
					 margin-top:16rpx;
					 text{
						 color: #FEDD12;
					 }
				}
				
			}
		}
	}
}
</style>
